<template>
  <div class="tool-card group">
    <div class="flex items-start space-x-4">
      <div 
        class="w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform"
        :class="iconBgClass"
      >
        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" :d="icon"></path>
        </svg>
      </div>
      <div class="flex-1">
        <h3 class="text-lg font-semibold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors">
          {{ title }}
        </h3>
        <p class="text-gray-600 text-sm mb-3">{{ description }}</p>
        <slot name="actions">
          <NuxtLink 
            v-if="to" 
            :to="to" 
            class="primary-button inline-block text-sm"
          >
            {{ actionText || '开始使用' }}
          </NuxtLink>
          <button 
            v-else 
            @click="$emit('click')" 
            class="primary-button inline-block text-sm"
          >
            {{ actionText || '开始使用' }}
          </button>
        </slot>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  title: {
    type: String,
    required: true
  },
  description: {
    type: String,
    required: true
  },
  icon: {
    type: String,
    required: true
  },
  to: {
    type: String,
    default: null
  },
  actionText: {
    type: String,
    default: null
  },
  iconBgClass: {
    type: String,
    default: 'bg-gradient-to-br from-blue-500 to-blue-600'
  }
})

defineEmits(['click'])
</script>